<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>教育资源-教师资源</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/Album.css">
</head>
<body>
<div id ="header" ></div>
<div class="albumMainBg">
	<div class="albumMid">
		<p class="pTit">
			相册
			<span class="content">
				<a href="##" class="on">我的相册</a>
				<em>|</em>
				<a href="##">好友照片</a>
			</span>
		</p>
		<div class="content11 onCont">
			<div class="picUpload clearfix">
				<div class="upMain showImg"></div>
				<div class="upMain22 showImg"></div>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
				<a class="showImg" href="AlbumNext.html" >
					<dl>
						<dt>
							<img src="./imgs/yueming.jpg">
							<div class="album_arrow dis_none">
								<div class="album_opt">
									<i class="arrow_blue_down"></i>
								</div>
								<div class="drop-box album_dropbox dis_none">
									<p>
										<span class="edit_article" onclick="">
											<i class=" icon_edit_m icon_m  png_bg mgr5"></i>
											编辑
										</span>
									</p>
									<p>
										<span class="delete_article" onclick="">
											<i class="icon_m icon_del2_m png_bg mgr5" ></i>
											删除
										</span>
									</p>
								</div>
							</div>
						</dt>
						<dd>
							<p class="tit">
								aaaaa
							</p>
							<label class="label" >好友可见</label>
						</dd>
						<p class="place_num_wrap">
							<span class='album_pic_num'>6</span>
						</p>
					</dl>
					<p class="bottomTip">
						2019年08月26日
					</p>
				</a>
			</div>
			<div class="turnPage">
				<span>
					<a href="##" class="prevpage p_left">上一页</a>
					<a href="www.baidu.com" class="on">1</a>
					<a href="www.baidu.com">2</a>
					<a class="nextpage p_right" href="##">下一页</a>
					<span class="mglr15 txt">共 2 页</span>
					<span class="txt">去第</span>
					<div class="mglr5 page_num_wrap t_l">
						<input type="text" value="" class="num_text" maxlength="2" >
						<p class="anim" id="anim">
							<input type="button" value="确定" class="cfm">
							<span class="txt">页</span>
						</p>
					</div>
				</span>
			</div>
			<div class="sublimeLine">
				<!-- 点击上传页面直接跳转到上传页面 -->
				<a href="AlbumAdd.html" class="uploadBtn">上传图片</a>
				<!-- 点击创建相册按钮，弹出创建的弹出 -->
				<a href="##" class="makeNew">创建新相册</a>
			</div>
		</div>
		<div class="content11">
			<div class="noting22 dis_none">
				<img src="imgs/waterNot.png" alt="nothing" class="noting">
				<p class="notList">还没有好友分享照片</p>
			</div>
			<div class="hasThing">
				<ul>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>

					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
					<li>
						<a href="" class="bannerImg">
							<img src="./imgs/goodFri.jpg" alt="" class="friMid">
						</a>
						<p class="listEat">
							持续吃	
						</p>
						<div class="clearfix f_info">
							<a class="bottom_info">
								<img src="./imgs/yueming.jpg" alt="head" class="headerId">
								<span class="nameHead">可以的</span>
							</a>
							<span class='rightBIg'>
								<a href="" class="praise">
									(
									<i class="praise_num">2</i>
									)
								</a>
								<a class="albumMake" href="##">相册</a>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="footerBot"></div>
<script src="./js/jquery.js"></script>
<script src="./js/fxtpl.plus.js"></script>
<link rel="stylesheet" href="./webupload/webuploader.css">
<script src="./webupload/webuploader.js"></script>
<script src="./webupload/upload.js"></script>
<script src="./layui/layui.all.js"></script>
<link rel="stylesheet" href="./layui/css/layui.css">
<script>
	 var numSpace = {numSpace:5};
	 var header = Fxtpl.render('./weight/headerAllInputChange.html',numSpace);
	 $('#header').html(header);


	$(".content a").on("click",function(){
		// console.log("点击到导航上边的这块的东西了");
		var numIndex = $(".content a").index($(this));
		$(".content a").each(function(){
			$(this).removeClass("on");
		});
		$(this).addClass("on");
		$(".albumMid .content11").each(function(){
			$(this).removeClass("onCont");
		});
		$(".albumMid .content11").eq(numIndex).addClass("onCont");
	});
// 创建相册的时候用的
	var str= '<div class="lineHeight clearfix">';
		str += '<label for="name">相册名称</label>';
		str += '<input type="text" maxlength="10" name="name" id="name" class="inputForm">';
		str	+='<label>';
		str +='<strong>3</strong>';
		// 这里面有个计数的功能；
		str +='/30';
		str +='</label>';
		str += '</div>';
		str += '<div class="lineHeight clearfix">';
			str += '<label for="describe">相册描述</label>';
			str += '<textarea type="textarea" name="describe" placeholder="说说这个相册的故事...(非必填)"  class="textareaIn"></textarea>';
			str	+='<label>';
			str +='<strong>3</strong>';
			// 这里面有个计数的功能；
			str +='/30';
			str +='</label>';
		str += '</div>';
		str += '<div class="lineHeight clearfix">';
		str +="<label for='power' >相册权限</label>";
		str += '<select name="power" >';
		str +='<option value="">所有人可见</option>';
		str +='<option value="">好友可见</option>';
		str +=	'<option value="">仅主人可见</option>';
		str +=	'</select>';
		str +='<div class="btnLine">';
			str +="<button class='sure'>确定</button>";
			str +="<button class='cancal'>取消</button>";
		str +='</div>';
		str +=	'</div>';
		$('.makeNew').on('click', function(){
		    layer.open({
		      type: 1,
		      title:"创建相册",
		      area: ['437px', '320px'],
		      shadeClose: true, //点击遮罩关闭
		      content:str,
		    });
	    });
	    // 编辑相册的时候用的
	    var str= '<div class="lineHeight clearfix">';
	    	str += '<label for="name">相册名称</label>';
	    	str += '<input type="text" maxlength="10" name="name" id="name" class="inputForm">';
	    	str	+='<label>';
	    	str +='<strong>3</strong>';
	    	// 这里面有个计数的功能；
	    	str +='/30';
	    	str +='</label>';
	    	str += '</div>';
	    	str += '<div class="lineHeight clearfix">';
	    		str += '<label for="describe">相册描述</label>';
	    		str += '<textarea type="textarea" name="describe" placeholder="说说这个相册的故事...(非必填)"  class="textareaIn"></textarea>';
	    		str	+='<label>';
	    		str +='<strong>3</strong>';
	    		// 这里面有个计数的功能；
	    		str +='/30';
	    		str +='</label>';
	    	str += '</div>';
	    	str += '<div class="lineHeight clearfix">';
	    	str +="<label for='power' >相册权限</label>";
	    	str += '<select name="power" >';
	    	str +='<option value="">所有人可见</option>';
	    	str +='<option value="">好友可见</option>';
	    	str +=	'<option value="">仅主人可见</option>';
	    	str +=	'</select>';
	    	str +='<div class="btnLine">';
	    		str +="<button class='sure'>确定</button>";
	    		str +="<button class='cancal'>取消</button>";
	    	str +='</div>';
	    	str +=	'</div>';

    		$('.edit_article').on('click', function(){
    		    layer.open({
    		      type: 1,
    		      title:"编辑相册",
    		      area: ['437px', '320px'],
    		      shadeClose: true, //点击遮罩关闭
    		      content:str,
    		    });
    	    });

	    // 关闭按钮
	    $(document).on('click','.btnLine .cancal',function(){
	    	layer.close(layer.index)
	    });

	    $(".showImg").hover(function(){
	    	$(this).find(".album_arrow").removeClass("dis_none");
	    	return false;
	    },function(){
	    	$(this).find(".album_arrow").addClass("dis_none");
	    	return false;
	    });
	    $(".showImg .album_arrow").on("click",function(){
	    	// 写活点击
	    	var thisBox = $(this).find(".album_dropbox");
	    	if( thisBox.hasClass("dis_none") ){
	    		thisBox.removeClass("dis_none");
	    	}else {
	    		thisBox.addClass("dis_none");
	    	}
	    	return false;
	    });

	    // 删除和编辑制作
	    $(".delete_article").on("click",function(){
	    	layer.confirm('确定要删除相册吗', {
	    	  btn: ['删除',"退出"] //按钮
	    	}, function(){
	    	  layer.msg('删除成功', {icon: 1});
	    	}, function(){
	    	});
	    });

	    $(".turnPage span input.num_text").on("click",function(){
	    	$(this).siblings(".anim").css("left","37px");
	    });
	    /*如果大于5*4 20个的时候出现分页的效果*/
	    if($(".picUpload .showImg")){
	    	
	    } 

</script>
</body>	
</html>